<template>
  <div class="doctorbox">
    <el-menu
      default-active="0"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
    >
      <el-menu-item index="0" @click="orders">查看订单</el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="1" @click="bigDatas">我的数据</el-menu-item>
      <el-sub-menu index="2">
        <template #title>个人中心</template>
        <el-menu-item index="2-1" @click="goOnline">上线</el-menu-item>
        <el-menu-item index="2-2" @click="Offline">下线</el-menu-item>
        <el-menu-item index="2-3" @click="Offlines">退出登录</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->
<bigData class="bigData"></bigData>
<order class="order"></order>
  </div>
</template>

<script setup>
// import order from "./order.vue"
import bigData from "./bigData.vue"
import order from "./order.vue"
// element代码
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../../store/index";
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const Mystore = store();
// Mystore.id=route.query.doctorID
// 点击路由切换订单界面/数据图表中
const chang=reactive({zindex1:2,zindex2:1})
function orders() {
  // router.push("/order");
chang.zindex1=2
chang.zindex2=1

}
function bigDatas() {
  // router.push("/bigData");
chang.zindex1=1
chang.zindex2=2
}
// onMounted(() => {
//   order();
// });

// 上线
function goOnline() {
  proxy.$axios({
    url: "/goOnline",
    params: { did: Mystore.id },
  });
}

// 下线
function Offline() {
  proxy.$axios({
    url: "/Offline",
    params: { did: Mystore.id },
  });
}

// 退出
function Offlines() {
  proxy.$axios({
    url: "/Offline",
    params: { did: Mystore.id },
  });
  router.push("/");
}




</script>

<style lang="scss" scoped>

.order{
  position: absolute;
  z-index: v-bind("chang.zindex1");
}

.bigData{
  position: absolute;
   z-index: v-bind("chang.zindex2");;
   background-color: aliceblue;
}









.flex-grow {
  flex-grow: 1;
}
.doctorbox {
  width: 100%;
  height: 100%;
}
</style>